<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<!-- 
<div id="app">: 根节点容器，用作整个 Vue 应用的挂载点。
<router-view />: Vue Router 提供的动态组件，用于渲染匹配当前路径的路由组件。是单页应用实现切换页面的核心。
<theme-picker />: 自定义组件，通常用于让用户选择或切换主题颜色。 

-->
<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>

<!-- 
解释：
✅ 引入组件：
import ThemePicker from "@/components/ThemePicker";：从指定路径引入 ThemePicker 组件，这个组件通常用来选择主题色。
✅ 注册组件：
components: { ThemePicker }：将该组件注册为局部组件，使其可以在 <template> 中使用。
✅ 动态设置页面标题（SEO 友好）：
使用的是 vue-meta 插件的功能（通过 metaInfo() 方法）。
title: 如果 dynamicTitle 为 true，则使用 store 中的 title 作为页面标题的一部分。
titleTemplate: 定义标题格式：
如果有自定义标题，则显示 "自定义标题 - 默认标题"；
否则只显示默认标题（来自 .env 文件中的 VUE_APP_TITLE 环境变量）。 -->

<style scoped>
#app .theme-picker {
  display: none;
}
</style>
